{extend name="../app/index/view/layout/main.html" /}
//网站标题
{block name="title"}<title>设置 - {$meta.appname}</title>{/block}

//css资源
{block name="link"}
<!-- 第三方库css -->
<link rel="stylesheet" href="__STATIC__/lib/layui/css/layui.css">
<link rel="stylesheet" href="__STATIC__/lib/swiper/css/swiper.css">

<!-- 自定义css -->
<link rel="stylesheet" href="__INDEX_STATIC__/css/common.css">
<link rel="stylesheet" href="__INDEX_STATIC__/css/app.css">
<style>
  .footer{
    position: fixed;
    bottom: 0;
    width: 100%;
  }
</style>
{/block}

//js资源
{block name="script"}
<script src="__STATIC__/lib/layui/layui.js"></script>
<script src="__INDEX_STATIC__/js/config.js"></script>
<script>
    'use strict';
    layui.use(['layer', 'jquery', 'nav', 'upload','form'], function(){
        let layer = layui.layer
            ,$ = layui.jquery
            ,form = layui.form
            ,upload = layui.upload
            ,flag = true;

        //图片上传
        var uploadInst = upload.render({
            elem: '#up_btn'
            , url: "{:url('uploadAvatar')}"
            , field: 'avatar'
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#avatar_img').attr('src', result); //图片链接（base64）
                });
            }
            , done: function (res) {
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败');
                }
                //上传成功
                $('#image_input').val(res.data['src']);
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#avatar_msg');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });

        //监听提交
        form.on('submit(formAvatar)', function(data){
            if (!flag) return false;

            flag = false;

            $.ajax({
                url : '{:url("saveAvatar")}',
                type: 'POST',
                data: data.field,
                success: function(d){
                    layer.msg(d.msg,function(){
                        if (d.code === 0){
                            window.location.reload();
                        }
                        flag = true;
                    })
                }
            });

            return false;
        });
    });
</script>
{/block}

//body
{block name="body"}
<!-- body -->
<section class="body top-25">
  <div class="layui-container">
    <div class="layui-row layui-col-space20">
      <div class="layui-col-md3">
        {include file="user/nav" curr="setAvatar" /}
      </div>
      <div class="layui-col-md9">
        <div class=" block">
          <div class="block-header flex-def flex-zBetween">
            <h2>基本信息</h2>
          </div>
          <div class="setting">
            <form class="layui-form" action="">
              <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                  <input type="text" value="{$user.username}" disabled class="layui-input">
                </div>
              </div>

              <!--头像-->
              <div class="layui-form-item">
                <label  class="layui-form-label">头像</label>
                <div class="layui-input-block">
                  <div class="layui-upload-list">
                    <img src="{$user.avatarUrl}" width="145" height="145" class="layui-upload-img" id="avatar_img">
                    <p id="avatar_msg"></p>
                  </div>
                  <div class="layui-upload" style="display: flex;">
                    <button id="up_btn" type="button" class="layui-btn layui-btn-primary">选择图片</button>
                    <button class="layui-btn" lay-submit lay-filter="formAvatar">确认</button>
                    <input id="image_input" type="hidden" readonly class="layui-input" name="avatar">
                  </div>
                  <div class="layui-form-mid layui-word-aux">请选择一张( 320 * 320 )尺寸的图片, 上传后将被剪切.</div>
                </div>
              </div>

            </form>
          </div>
        </div>
      </div>

    </div>

  </div>
</section>
{/block}